<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">
				<a-search :isOk="true" @change="searchChange" />
			</block>
		</cu-custom>
		<a-fixed :height="40">
			<a-tabs @click="inquire" :row="tabs.length" type="border" :value="tabs"></a-tabs>
		</a-fixed>
		<a-scroll :request="get" ref="aScroll" :parm="{pageSize:30}">
			<template #item="{row:x,index}">
				<a-list :hideIcon='!!tabsParm.id' :value="{...x,index}" @click="itemClick">
					<template #top-right v-if="x.phone">
						<view style="font-size: 16px;opacity: .7;">{{x.phone}}</view>
					</template>
					<template #bottom-right v-if="x.contact">
						<view>
							<a v-if="x.phone" :href="'tel:'+x.phone" class="iconfont icon-dianhua" @click.stop></a>
							<text class="iconfont icon-duanxin"></text>
						</view>
					</template>
					<template #default="{row}">
						<a-list v-if="!!(teacherList[index] || []).length" :hide-icon="true" :value="x" v-for="x in teacherList[index]">
							<template #top-right>
								<view style="font-size: 16px;opacity: .7;">{{x.phone}}</view>
							</template>
							<template #bottom-right>
								<view>
									<a :href="'tel:'+x.phone" class="iconfont icon-dianhua" @click.stop></a>
									<text class="iconfont icon-duanxin"></text>
								</view>
							</template>
						</a-list>
						<view v-if="!(teacherList[index] || []).length" style="text-align: center;line-height: 3em;font-size: 12px;color: #000;">没有数据</view>
					</template>
				</a-list>
			</template>
		</a-scroll>
		<view class="bottom-a-tabs">
			<a-tabs color="#0055ff" :height="50" type="border" :value="nav" :disabled='true' @click="go">
				<template #book="{row,index}">
					<text class="iconfont icon-tongxunlu" style="font-size: 1.2em;"></text>
					通讯录
				</template>
				<template #msg="{row,index}">
					<text class="iconfont icon-liaotianjilu" style="font-size: 1.2em;"></text>
					聊天记录
				</template>
			</a-tabs>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from "@/a/utils/api";
	export default {
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		watch:{
			'tabsParm.id'(){
				this.teacherList = [];
			}
		},
		data() {
			return {
				tabs: [{
					id:0,
					url:'/api/v1/dept/findDeptPage',
					name: "老师"
				}, {
					id:1,
					url:'/api/v1/student/selectStudents',
					name: "学生"
				}],
				tabsParm:{
					id:0,
					url:'/api/v1/dept/findDeptPage',
					name: "老师"
				},
				searchText: "",
				nav: [{
					slot: "book"
				}, {
					slot: 'msg',
					disabled: true,
					url: '/pages/parents/msgList/msgList'
				}],
				teacherList:[]
			}
		},
		methods: {
			go({
				url
			}) {
				uni.redirectTo({
					url
				});
			},
			get(parm = {}) {
				return this.$http.post(this.tabsParm.url,{
					...parm,
					// role:this.tabsParm.id,
					classId:this.$store.state.userInfo.classId,
					name: this.searchText
				}).then(result=>{
					return {
						total:result.totalSize,
						data:result.results.map(x=>{
							return {
								...x,
								img:this.$http.imgUrl+x.photo,
								contact:this.tabsParm.id,
								sonTitle:x.stuNumber,
								phone:x.telephone,
								name:x.sex?`${x.name}(${x.sex})`:x.name
							}
						})
					}
				});
			},
			inquire(e) {
				this.tabsParm = e;
				this.$refs.aScroll.get(true);
			},
			searchChange(e) {
				this.searchText = e;
				this.$refs.aScroll.get(true);
			},
			async itemClick(...e){
				const [value,than] = e;
				if(this.teacherList[value.index] || this.tabsParm.id) return;
				const result = await this.$http.get('/api/v1/deptTeacher/selectDeptTeachers',{
					deptId:value.id
				}).finally(than.$loading({msg:'获取中'}));
				this.teacherList.splice(value.index,0,result.map(x=>{
					return {
						...x,
						img:this.$http.imgUrl+x.photo,
						phone:x.telephone,
						name:x.sex?`${x.name}(${x.sex})`:x.name
					}
				}));
			}
		}
	}
</script>

<style lang="scss">
	.icon-duanxin,
	.icon-dianhua {
		font-size: 28px;
		margin: 0 5px;
		color: #0055ff;
	}

	.bottom-a-tabs {
		height: 50px;

		.a-tabs {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 998;
			padding-bottom: 2px;
			font-size: 18px;

			&::after {
				top: 0;
				bottom: auto;
			}
		}
	}
</style>
